<template>
  <div class="first-tabs">
    <el-tabs :model-value="activeName" class="demo-tabs">
      <el-tab-pane label="登录日志" name="first">
        <LoginLog />
      </el-tab-pane>
      <el-tab-pane label="修改信息" name="second">
        <EditInfo />
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="third">
        <EditPassword />
      </el-tab-pane>
      <el-tab-pane label="绑定手机" name="fourth"> 
        <BindPhone/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import LoginLog from "./components/loginLog/index.vue";
import EditInfo from "./components/editInfo/index.vue";
import EditPassword from "./components/editPassword/index.vue";
import BindPhone from "./components/bindPhone/index.vue";
const activeName = ref("second");
</script>

<style lang="scss" scoped>
.demo-tabs {
  height: 100%;
}
</style>
